import React, { Component } from 'react';
import './cloze.css';


class Cloze extends Component {

    constructor(props){
        super(props);

        this.state = {
            show:"none",
            selectId:"",
            questionList:this.props.data.common_question
        };

    }

    getLeft(){

        if(this.props.switch === 0){
            return 0+'px';
        }

        if(this.props.switch === 1){
            return (-this.props.width)+'px';
        }

    }


    clickHander(e){

        let node = e.target;
        if(node.className === 'question'){

            let qid = node.dataset.qid;

            this.setState({
                show:"block",
                selectId:qid
            });

            return;
        }

        this.props.mark(e);
    }

    selectionAnswer(e){

        let node = e.target;

        if(node.className.indexOf('seleclt-words') >= 0){
            let answer = node.dataset.value;
            let id = this.state.selectId;
            let dom = this.state.questionList;

            let regTxt = '<span\\s{0,} id="question_'+id+'"\\s{0,} data-qid="'+id+'"\\s{0,} class="question"\\s{0,}(style="display: inline;"){0,}>[\\s\\w\\d.]{0,}<\/span>';
            let regObject = new RegExp(regTxt, 'gm');
            
            

            let replaceText = '<span id="question_'+id+'" data-qid="'+id+'" class="question" style="display: inline;">'+answer+'<\/span>'
            dom  = dom.replace(regObject, replaceText);

            
            node.dataset.id = id;
            e.target = node;
            this.props.input(e);


            this.setState({
                show:"none",
                questionList:dom
            });

            return;

        }


        this.setState({
            show:"none"
        });

    }

    renderSelection(){
        return (
            <div className="selection-packet">
                {
                    this.props.data.bind_question.map((value, index)=>{
                        let object = value.selection
                        for(let i in object){
                            return (
                                <div key={index}  data-value={object[i]}  className="quesionts-selection seleclt-words">
                                    <span key={index}  data-value={object[i]} className="seleclt-words">{i}. {object[i]}</span>
                                </div>    
                            )
                        }
                    })
                }
            </div>    
            
        )  
    }


    renderWordsTab(){

        let newArray = [];

        let index = 0;
        let count = 0;
        this.props.data.bind_question.map((value, key)=>{
            if(count === 0){
                newArray[index] = new Array();
            }

            newArray[index].push(value.selection);

            count++;

            if(count >= 2){
                index++;
                count = 0;
            }
        });

        return (
            <div onClick={(e)=>this.clickHander(e)}  className="flex-column panel">
                {
                    newArray.map((tr, trKey)=>{
                        return (
                            <div key={trKey} className="flex-cell flex-row">
                                {
                                    tr.map((td, tdKey)=>{
                                        {
                                            for(let i in td){
                                                return (
                                                    <div key={tdKey} className="flex-cell flex-row-2 flex-height"><span className="query_words">{i}. {td[i]}</span></div>
                                                )
                                            }
                                        }
                                    })
                                }
                            </div>
                        )
                    })
                }                    
            </div>
        );

    }


    render() {

        let isShow = this.state.show;

        let left = this.getLeft();

        let wordstab = this.renderWordsTab();
        

        return (
            <div style={{height:this.props.height}} className="question-view">
                <ul className="question-card-box" style={{width:this.props.width*2, left:left}}>
                    <li className="question-card" style={{width:this.props.width}}>
                        <div className="quesiton-wrapper">
                            <div onClick={(e)=>this.clickHander(e)} className="setcion_explain" dangerouslySetInnerHTML={{ __html: this.props.data.section_explain }}></div>
                            <div onClick={(e)=>this.clickHander(e)} className="explain" dangerouslySetInnerHTML={{ __html: this.props.data.explain }}></div>
                            
                            {wordstab}

                        </div> 
                    </li>

                    <li className="question-card" style={{width:this.props.width}}>
                        <div onClick={(e)=>this.clickHander(e)} 
                         className="quesiton-wrapper-2"  dangerouslySetInnerHTML={{ __html: this.state.questionList}} />
                        
                         <div onClick={(e)=>this.selectionAnswer(e)} className="selection-box" style={{display:isShow}}>
                            <div className="selection-box-wrapper">
                                <div className="selection-wrapper "> 
                                    {this.renderSelection()}
                                </div>
                            </div>
                         </div>

                    </li>

                </ul> 
            </div>
        );
    }
}

export default Cloze;